<script setup lang="ts">
const props = defineProps<{
  tags: string[]
  currentTag: string
  onTagChange: (tag: string) => void
  punchStats?: {
    todayPunchedCount: number
    totalMembers: number
  }
}>()
</script>

<template>
  <view class="tabs-section">
    <view
      v-for="(item, index) in props.tags"
      :key="index"
      class="tab-item"
      :class="{ active: props.currentTag === item }"
      @click="onTagChange(item)"
    >
      <view class="tab-content">
        <text class="tab-text">{{ item }}</text>
        <text v-if="item === '打卡' && props.punchStats" class="punch-stats">
          {{ `${props.punchStats.todayPunchedCount}/${props.punchStats.totalMembers}` }}
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import '@/styles/variables.scss';

@mixin section($margin-bottom: $section-margin) {
  padding: $container-padding;
  border-radius: $border-radius-xl;
  background-color: $white;
  box-shadow: $shadow-lg;
  margin-bottom: $margin-bottom;
}

.tabs-section {
  @include glass-effect;
  @include section();

  display: flex;
  justify-content: space-around;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $font-size-md;
    color: $dark-gray;
    cursor: pointer;
    transition: $transition-all;

    &.active {
      color: $primary-blue;

      .tab-content .punch-stats {
        background: $primary-blue;
        color: $white;
      }
    }

    &:active {
      transform: scale(0.95);
    }

    .tab-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: $spacing-xs;

      .tab-text {
        font-size: $font-size-md;
        font-weight: $font-weight-medium;
        font-family: $font-family;
      }

      .punch-stats {
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        font-family: $font-family;
        background: rgba(148, 163, 184, 0.2);
        color: $medium-gray;
        padding: 2px $spacing-xs;
        border-radius: $border-radius-sm;
        min-width: 30px;
        text-align: center;
        transition: $transition-all;
      }
    }
  }
}
</style>
